"use client"

import { useTheme } from 'next-themes'
import { useEffect } from 'react'
import themes from "@/config/theme";

export default function ThemeToggle() {
    const { theme, setTheme } = useTheme()

    useEffect(() => {
        document.documentElement.setAttribute('data-theme', theme || 'light')
    }, [theme])

    return (
        <select
            className="select select-bordered w-full max-w-xs"
            value={theme}
            onChange={(e) => setTheme(e.target.value)}
        >
            {themes.map((theme) =><option key={theme} value={theme}>{theme}</option>)}

        </select>
    )
}
